<template>
  <w-linkbox :multiple="true" :strict="true" :picker="picker" @input="suggest" @keydown.up.down="keyArrow"
    @keydown.enter="keyEnter" @dblclick:item="dblclickItem">
    <w-table>
      <w-columns>
        <w-column width="*" />
        <w-column width="100" />
      </w-columns>
      <w-tbody :current="current">
        <w-tr v-for="item in suggestList" :key="item.id" @click="clickAdd($event, item)">
          <w-td>{{item.name}}</w-td>
          <w-td>{{item.dept}}</w-td>
        </w-tr>
      </w-tbody>
    </w-table>
  </w-linkbox>
</template>

<script>
  import $ from '../../dfish.js'

  export default {
    props: ['modelValue'],
    watch: {
      modelValue(v) {
        this.setValue(v)
      }
    },
    data() {
      return {
        loading: false,
        suggestList: [],
        tableList: [],
        current: null,
        currentIndex: null,
        source: null,
        picker: {
          type: 'Dialog',
          template: 'task/TaskForm',
          class: 'large'
        }
      }
    },
    methods: {
      suggest(event, value) {
        this.current = null
        this.currentIndex = null
        this.suggestList = this.tableList.filter(v => v.name.includes(value))
      },
      suggestOnline(event, value) {
        if (this.source) {
          this.source.cancel()
        }
        this.source = $.ajax.CancelToken.source()
        $.ajax.get('widget.php?act=suggest&q=' + $.urlEncode(value), {
            cancelToken: this.source.token
          })
          .then(data => {
            this.suggestList = data.content
            this.current = null
            this.currentIndex = null
          })
      },
      clickAdd(event, item) {
        $(this).complete({
          value: item.id,
          text: item.name,
          forbid: item.forbid
        })
        $.close(event)
      },
      dblclickItem(e, v) {
        console.log(v)
      },
      keyArrow(event) {
        if (!this.loading && this.suggestList && this.suggestList.length) {
          let idx = this.currentIndex
          if (idx == null) idx = -1
          idx += event.keyCode == 38 ? -1 : 1
          if (idx < 0) {
            idx = this.suggestList.length - 1
          } else if (idx > this.suggestList.length - 1) {
            idx = 0
          }
          this.current = this.suggestList[idx].id
          this.currentIndex = idx
        }
      },
      keyEnter() {
        if (this.currentIndex != null) {
          let item = this.suggestList[this.currentIndex]
          $(this).complete({
            value: item.id,
            text: item.name
          }).closeDrop()
        }
      },
      setValue(mv) {
        if (!mv) {
          $(this).val([])
        } else if (typeof mv === 'string') {
          $(this).val(mv.split(',').map(v => {
            let r = this.tableList.find(o => o.id == v)
            return {
              value: r.id,
              text: r.name,
              forbid: r.forbid
            }
          }))
        }
      }
    },
    mounted() {
      this.tableList = [{
          id: '001',
          name: '擎天柱',
          dept: '史前地球',
          forbid: true
        },
        {
          id: '002',
          name: '威震天',
          dept: '塞伯坦星'
        },
        {
          id: '003',
          name: '大黄蜂',
          dept: '塞伯坦星'
        },
      ]
      this.setValue(this.modelValue)
      $(this).saveModified()
    },
  }
</script>
